<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
</head>
<body>
    <canvas id="optical-diagram" width="600" height="400"></canvas>
    <script>
        const canvas = document.getElementById('optical-diagram');
        const ctx = canvas.getContext('2d');

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Define coordinates and dimensions for the components
        const centerY = 180;
        const lensX = 350;
        const mirrorX = 520;
        const objectX = 100;

        const lensHeight = 160;
        const objectHeight = 90;
        const mirrorHeight = 180;
        const mainArrowHeadSize = 12;

        // 1. Draw the Principal Axis
        ctx.beginPath();
        ctx.moveTo(20, centerY);
        ctx.lineTo(580, centerY);
        ctx.stroke();

        // 2. Draw the Convex Lens (vertical line with arrowheads)
        ctx.beginPath();
        ctx.moveTo(lensX, centerY - lensHeight / 2);
        ctx.lineTo(lensX, centerY + lensHeight / 2);
        ctx.stroke();
        // Top arrowhead for the lens
        ctx.beginPath();
        ctx.moveTo(lensX, centerY - lensHeight / 2); // Tip
        ctx.lineTo(lensX - mainArrowHeadSize / 2, centerY - lensHeight / 2 + mainArrowHeadSize);
        ctx.lineTo(lensX + mainArrowHeadSize / 2, centerY - lensHeight / 2 + mainArrowHeadSize);
        ctx.closePath();
        ctx.fill();
        // Bottom arrowhead for the lens
        ctx.beginPath();
        ctx.moveTo(lensX, centerY + lensHeight / 2); // Tip
        ctx.lineTo(lensX - mainArrowHeadSize / 2, centerY + lensHeight / 2 - mainArrowHeadSize);
        ctx.lineTo(lensX + mainArrowHeadSize / 2, centerY + lensHeight / 2 - mainArrowHeadSize);
        ctx.closePath();
        ctx.fill();

        // 3. Draw the Plane Mirror
        ctx.beginPath();
        ctx.moveTo(mirrorX, centerY - mirrorHeight / 2);
        ctx.lineTo(mirrorX, centerY + mirrorHeight / 2);
        ctx.stroke();
        // Add hatching to indicate the non-reflective side of the mirror
        const numTicks = 9;
        const tickLength = 10;
        ctx.lineWidth = 1.5;
        for (let i = 0; i < numTicks; i++) {
            const y = (centerY - mirrorHeight / 2 + 15) + i * (mirrorHeight - 30) / (numTicks - 1);
            ctx.beginPath();
            ctx.moveTo(mirrorX, y);
            ctx.lineTo(mirrorX + tickLength, y - tickLength);
            ctx.stroke();
        }
        ctx.lineWidth = 2; // Reset line width to default

        // 4. Draw the Object (representing the graph paper)
        ctx.beginPath();
        ctx.moveTo(objectX, centerY - objectHeight / 2);
        ctx.lineTo(objectX, centerY + objectHeight / 2);
        ctx.stroke();
        // Add caps to the object line
        const capWidth = 10;
        ctx.beginPath();
        ctx.moveTo(objectX - capWidth, centerY - objectHeight / 2);
        ctx.lineTo(objectX + capWidth, centerY - objectHeight / 2);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(objectX - capWidth, centerY + objectHeight / 2);
        ctx.lineTo(objectX + capWidth, centerY + objectHeight / 2);
        ctx.stroke();

        // 5. Draw the Dimension 'L'
        const dimY = centerY + 90;
        const dimArrowHeadSize = 10;
        
        // Draw the main dimension line
        ctx.beginPath();
        ctx.moveTo(lensX, dimY);
        ctx.lineTo(mirrorX, dimY);
        ctx.stroke();

        // Draw left arrowhead (pointing left)
        ctx.beginPath();
        ctx.moveTo(lensX, dimY);
        ctx.lineTo(lensX + dimArrowHeadSize, dimY - 5);
        ctx.lineTo(lensX + dimArrowHeadSize, dimY + 5);
        ctx.closePath();
        ctx.fill();

        // Draw right arrowhead (pointing right)
        ctx.beginPath();
        ctx.moveTo(mirrorX, dimY);
        ctx.lineTo(mirrorX - dimArrowHeadSize, dimY - 5);
        ctx.lineTo(mirrorX - dimArrowHeadSize, dimY + 5);
        ctx.closePath();
        ctx.fill();
        
        // Add the label 'L'
        ctx.font = 'italic 24px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        // Clear a small area for the text to sit on, making it more readable
        ctx.clearRect((lensX + mirrorX) / 2 - 12, dimY - 2, 24, 4);
        ctx.fillText('L', (lensX + mirrorX) / 2, dimY - 2);

    </script>
</body>
</html>